<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>消息列表</title>
<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/index_team.css">
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
html, body {
	height: 100%;
}

body {
	overflow-y: scroll;
}

.layui-table-view .layui-table th,.layui-table-view .layui-table td {
	padding: 10px 0;
}
.select_title {
    display: inline-block;
    margin-right: 20px;
    color: #999;
}
.crm_select {
    display: inline-block;
    margin-right: 30px;
    color: #333;
    cursor: pointer;
}
.select_active {
    color: #62a8e9;
    font-weight: 600;
}
.selected{border: 1px solid #DBDBDB;color: #333;padding: 5px;}
.hide{display:none}
</style>
<body>
	<div class="kb-content layui-form" lay-filter="c">
	<input type="text" id="userid" name="userid" th:value="${userid}" hidden="hidden">
		<section class="kb-content-container clearfix">
			<header class="nav-header">
				<h2 class="nav-section-header-title">
					<span>消息列表</span>
				</h2>
			</header>
			<!-- <div style="margin: 20px 20px 0 20px;border-bottom: 1px solid #e6e6e6;">
				<div class="select-progress" style="margin-right: 0px; display: block;">
					<div style="margin-bottom: 20px;">
						<span class="select_title">来源：</span>
						<span class="crm_select ">线上</span>
						<span class="crm_select ">中介</span>
						<span class="crm_select ">社交网络</span>
						<span class="crm_select ">推荐</span>
					</div>
				</div>
				<div class="select-progress" style="margin-right: 0px; display: block;">
					<div style="margin-bottom: 20px;">
						<span class="select_title">状态：</span>
						<span class="crm_select ">已签</span>
						<span class="crm_select ">快到期</span>
						<span class="crm_select ">已结束</span>
					</div>
				</div>
				<div class="select-progress" style="margin-right: 0px; display: block;">
					<div style="margin-bottom: 20px;">
						<span class="select_title">日期：</span>
						<span class="crm_select " style="width:200px"><input name="date" type="text" class="layui-input" id="date"  placeholder=" - "></span>
					</div>
				</div>
			</div>
			<div  style="margin:20px 20px 0 20px; display: none;" id="keyword">
					<div>
						<span class="select_title">条件：</span>
						<span class="selected hide"><span  style="display: inline-block; margin-right: 10px;"></span> <i class="layui-icon del">&#x1006;</i></span>
						<span class="selected hide"><span  style="display: inline-block; margin-right: 10px;"></span> <i class="layui-icon del">&#x1006;</i></span>
						<span class="selected hide">创建日期：<span  style="display: inline-block; margin-right: 10px;"></span> <i class="layui-icon del">&#x1006;</i></span>
						<span style="padding-left:15px;cursor: pointer;" onclick ="reomveAllword()"><i class="layui-icon">&#xe640;</i>清空</span>
					</div>
				</div> -->
			<div class="layui-tab-content " id="teamList">
				<table class="layui-hide" id="LAY_table_msg" lay-filter="msg"></table>
			</div>
		</section>
	</div>
</body>
<script>
	var table;
	var laydate;
	var laiyuan = null;
	var state = null;
	var startDate = null;
	var enddate = null;
	var fanwei = null;
	var form;
	var userid = $("#userid").val();
	$(function() {

		layui.use([ 'element', 'table', 'layer','laydate','form' ],function() {
			var element = layui.element;
			table = layui.table;
			laydate = layui.laydate;
			form = layui.form;
			element.on('tab(docNavTabBrief)', function() {
				var target = $(this), index = $(this).index();

			});
			//日期范围选择
			/* laydate.render({ 
			  elem: '#date'
			  ,range: '~' //range: true 或 range: '~' 来自定义分割字符
			  ,done: function(value, date, endDate){
				  var d = value.split(" ~ ");
				  startDate = d[0];
				  enddate = d[1];
				  fanwei = 1;
				  tableRead();
				    showKeywords(value,2);
				  }
			}); */
			//方法级渲染
			table.render({
						id : 'msg',
						elem : '#LAY_table_msg',
						url : '/app/message/user/listdata',
						 where : {
							params : {
								userid:userid,
								delState:0
							}
						}, 
						cols : [ [
								{
									field : 'status',
									title : '阅读状态',
									width:'10%',
									align:'center',
									templet : function(d) {
										//return d.readState;
									 	if (d.readState) {
											return "<img src='/images/icon/letter-open.png'>"
										} else {
											return "<img src='/images/icon/letter-close.png'>"
										}
									} 
								},
								{
									field : 'subject',
									title : '消息类型',
									width:'10%',
									templet : function(d) {
										return '<span data-id="'+d.id+'" data-msgId="'+d.message.id+'">'+d.message.subject+'</span>';
									}
								},
								{
									field : 'messageContent',
									title : '消息内容',
									width: '60%',
									templet : function(d) {
										return d.message.messageContent;
									}
								},
								{
									field : 'created',
									title : '接收日期',
									width:'10%',
									align:'center',
									templet : function(d) {
										return d.message.created;
									}
								},
								{
									field : 'opt',
									title : '操作',
									align:'center',
									templet : function(d) {
										return '<a href="#" class="layui-btn  layui-btn-xs layui-btn-normal" onclick=delMsg("'+d.id+'",event)>删除</a>'
									}
								}] ],
						page : true,
						done : function() {
							setHeight()
						}
					});
			tableBtnOpt();
			
							
		});
		
		
		/* //筛选条件
		$(".crm_select").on("click",function(){
			$(this).addClass("select_active").siblings().removeClass("select_active");
			var index = $(".select-progress").index($(this).parent().parent());
			showKeywords($(this).text(),index);
			if(index == 0){
				laiyuan = $(this).index()-1;
			}else{
				state = $(this).index()-1;
			}
			 tableRead();
		})
		//清除某个筛选条件
		$(".del").on("click",function(){
			$(this).parent().addClass("hide");
			var index = $(".selected").index($(this).parent());
			$(".select-progress").eq(index).find(".crm_select").removeClass("select_active");
			if(index == 0){
				laiyuan = null;
			}else if(index == 1){
				state = null;
			}else{
				startDate = null;
				enddate = null;
				fanwei = null
				$("input[name='date']").val('');
			}
			if($(".hide").length == 3){
				$("#keyword").hide();
			}
			tableRead();
		}) */
	})
	/* //清空所有筛选条件
	function reomveAllword(){
		laiyuan = null;
		state = null;
		startDate = null;
		enddate = null;
		fanwei = null
		$("#keyword").hide();
		$(".selected").addClass("hide");
		$("input[name='date']").val('');
		$(".crm_select").removeClass("select_active");
		tableRead();
	}
	
	//展示查询条件
	function showKeywords(value,index){
		$("#keyword").show();
		$(".selected").eq(index).removeClass("hide").find("span").text(value);
	} */
	function tiaozhuan(id,msgId) {
		var iframeSrc = '/app/message/user/details/' + id+"_"+msgId;
		var iframe = window.parent.document.getElementById('iframe-top');
		iframe.src = iframeSrc;
		/* iframe.width = '100%';
		iframe.height = '100%';
		iframe.id = 'project-iframe'; */
		//parent.parent.$(".iframe-wrap").html($(iframe));
	}
	function tableBtnOpt() {
		var $mylist = $("#LAY_table_msg").next('.layui-table-view').find(
				'.layui-table-body table.layui-table');
		/*  点击tr元素,跳转详情基于table*/
		$mylist.on("click", 'tr', function() {
			var targetI = $(this);
			var id = $(targetI).children('td').find("span[data-id]").attr("data-id");
			var msgId = $(targetI).children('td').find("span[data-id]").attr("data-msgId");
			tiaozhuan(id,msgId);
			return false;
		});
	}

	/* 阻止事件冒泡 */
	function preventBubble(event) { //取消事件冒泡
		var e = arguments.callee.caller.arguments[0] || event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
		if (e && e.stopPropagation) {
			e.stopPropagation();
		} else if (event) {
			event.cancelBubble = true;
		}
	}
	/* 根据iframe的内容撑开iframe的容器 */
	function setHeight() {
		/*  var h = document.body.offsetHeight*1;
		 window.parent.parentHeight(h); */
	}
	//表单重载
	function tableRead(){
		table.reload('msg', {
			  where: { //设定异步数据接口的额外参数，任意设
				 /*  params : {
					  laiyuan:laiyuan,
					  state:state,
					  startDate:startDate,
					  enddate:enddate,
					  fanwei:fanwei
					} */
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			});
		tableBtnOpt();
	}
	function delMsg(id,event){
		preventBubble(event);
		top.layer.confirm('是否确定删除该信息？', function(index){
	    	//发送删除请求
	    	$.post("/app/message/user/delete",{id:id},function(res){
	    		top.layer.msg(res.msg);
	    		top.layer.close(index);
	    		tableRead();
	    		setHeight();//更新容器高度
	        },"json");
	  	});
	}
</script>
</html>